<template>

    <div class="goods-detail">
        <detail-nav-bar></detail-nav-bar>
        <scroll :probe-type="3"
                class="detail-scroll">
            <detail-swiper :topImgs="topImages"></detail-swiper>
            <detail-base-info :goods="goodsData"></detail-base-info>
            <detail-shop-info :shop="shopData"></detail-shop-info>
            <!-- <detail-goods-info :goodsInfo="detailInfoData"></detail-goods-info> -->
            <detail-param-info :param="detailParamData"></detail-param-info>

        </scroll>
    </div>
</template>
<script>
import DetailNavBar from './childComps/DetailNavBar';
import DetailSwiper from './childComps/DetailSwiper';
import DetailBaseInfo from './childComps/DetailBaseInfo';
import DetailShopInfo from './childComps/DetailShopInfo';
import DetailGoodsInfo from './childComps/DetailGoodsInfo';
import DetailParamInfo from './childComps/DetailParamInfo';

import Scroll from '../../components/common/scroll/Scroll';

import { getDetail, Goods, Shop, Param } from '../../network/detail';


export default {
    name: "GoodsDetail",
    components: {
        Scroll,
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo,
        DetailGoodsInfo,
        DetailParamInfo
    },
    data: function () {
        return {
            id: null,
            topImages: [],
            goodsData: {},
            shopData: {},
            detailInfoData: {},
            detailParamData: {}
        }
    },
    created: function () {
        this.id = this.$route.params.id;
        // //获取详情数据
        this.getDetail(this.id);
    },
    methods: {
        getDetail: function (id) {
            getDetail(id).then((res) => {
                const data = res.result;
                //1.获取顶部banner
                this.topImages = data.itemInfo.topImages;
                //2.获取商品详情
                this.goodsData = new Goods(data.itemInfo, data.columns, data.shopInfo.services);
                //3.获取商家详情
                this.shopData = new Shop(data.shopInfo);
                //4.获取商家详情图片
                this.detailInfoData = data.detailInfo
                //5.获取参数详情
                this.detailParamData = new Param(data.itemParams.info, data.itemParams.rule);
                console.log(this.detailParamData);
            })
        }
    }
}
</script>
<style scoped>
.goods-detail {
    background-color: #eaeaea;
    height: 100vh;
    position: relative;
    z-index: 9;
}

.detail-scroll {
    height: calc(100% - 44px);
}
</style>
